/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-03-31 14:58:28
 * @LastEditors: cuidm
 * @LastEditTime: 2022-09-30 13:34:02
 */
import React, { useState, useEffect } from 'react'
import { DragList } from "@/components";
import { Drawer, Button,  Select, Input, Space, Affix } from 'antd';
import { ProCard } from '@ant-design/pro-components';
import { AudioOutlined, ArrowRightOutlined} from '@ant-design/icons';
import "./index.less"
 
const TableColumsProperties = ({placement, drawerWidth, visible,checkedFields, setCheckedFields, unCheckedFields, onClose, onOk, onSearch, onReset, onUpdateCheckedFields, onUpdateUncheckedFields}) => {
    const { Search } = Input;
    const [searchValue, setSearchValue] = useState('');

    const suffix = (
        <AudioOutlined
            style={{
            fontSize: 16,
            color: '#1890ff',
            }}
        />
    );
    return (
        <Drawer 
            className="drawer-table-columns"
            title="列表显示属性配置"
            placement={placement || 'right'}
            width={drawerWidth || 600}
            onClose={onClose}
            visible={visible}
            footer={
                <>
                    <div style={{ display: "inline-block", width: "calc(100% - 80px)" }}>
                        <Space>
                            <Button onClick={onOk} type="primary">确定</Button>
                            <Button onClick={onClose}>取消</Button>
                        </Space>
                    </div>
                    <div style={{ display: "inline-block", width: "80px", textAlign: "right" }}>
                        <Button onClick={onReset}>还原默认</Button>
                    </div>
                </>
            }
        >
        <ProCard split="vertical">
            <ProCard colSpan="50%" ghost style={{overflow: "auto"}}>
                <Affix offsetTop={56} onChange={affixed => console.log(affixed)}>
                    <div className="field-search-layout">
                        <Search placeholder="请输入属性名称" 
                            onChange={(e) => {
                                setSearchValue(e.target.value);
                            }} 
                            onSearch={() => {onSearch(searchValue)}}
                            onPressEnter={() => {onSearch(searchValue)}} 
                            enterButton 
                        />
                    </div>
                </Affix>
                <div className="left-columns">
                    {unCheckedFields && unCheckedFields.length > 0 ? unCheckedFields.map((item, index) => {
                    return (
                        <div key={item.id} className="field-list-layout">
                            <span className="field-list-item">{item.propertyName}</span>
                            <ArrowRightOutlined onClick={() => { onUpdateUncheckedFields(item)}} />
                        </div>
                    )
                    }): ""}
                </div>
            </ProCard>
            <ProCard colSpan="50%" ghost>
                <Affix offsetTop={56} onChange={affixed => console.log(affixed)}>
                    <div style={{ backgroundColor: "#fff", zIndex: "99999" }}><span className="card-title">已选属性</span></div>
                </Affix>
                <DragList checkedFilelds={checkedFields} setCheckedFields={setCheckedFields} onUpdateFields={onUpdateCheckedFields}></DragList>
            </ProCard>
        </ProCard>
    </Drawer>
    )
}
 
export default TableColumsProperties